Click here to Skip to main content
15,887,683 members
Articles / Web Development / ASP.NET
Article

Treeview-creating a treeview of folder structure using javascript ,xsl and .net

Rate me:
Please Sign up or sign in to vote.
1.87/5 (7 votes)
26 Jun 20077 min read 47.6K   475   21   3
Creating on fly treeview of folder structure by genrating dynamic xml using asp.net ,this xml is transformed using xslt and following user navigation using javascript.

Introduction

This is my first article to code project, its been more than 3 months following the articles I felt interesting the way everyone submitting the articles ,I feel the time has come to submit an article which will be helpful to naive developers.I here presenting an article which involves vb coding, xml generation ,using xslt and javascript .

Before wetting our foot with coding I want to give bird's eye of whats this article about.

There was a requirement like showing a tree view of folder structure which is very fickle(mean folder structure is changing), when ever user hits the page he must be viewed with latest folders ,documents etc., present in system(server) should be viewed. To keep up the requirement I used xml which will be generated on the fly when user hits the page and to beautify the front end we used xslt and javascript to follow user navigation in front end.I would explain the objects used with respect to code.

Using the code

Prerequisites for following the code a small pinch of knowledge about javascript,xslt and bit more experience on visual basics.
here I go first with namespaces used in this application.


<br />imports system.xml<br />imports system.xml.xsl<br />imports system.text<br />imports system.io

These are namespaces used for accessing system directory objects and xml objects.
(File Path and other variables naming conventions are not been standardized)
Dim tw As XmlTextWriter
tw = New XmlTextWriter("C:\\test\test12345" & ".xml", _<br /> New System.Text.UTF8Encoding())<br /><br /> tw.Formatting = Formatting.Indented<br /> 'tw.Indentation = 4<br /><br /> ' Write out the header information<br /> tw.WriteStartDocument()'starting the xml with tag name "folders" you can change it to other 'but change correspondingly in xslt file also
tw.WriteStartElement("FOLDERS")'starting the xml with tag name "folder" you can change it to other 'but change correspondingly in xslt file also
tw.WriteStartElement("FOLDER")<br /> tw.WriteAttributeString("name", "Knowledge Tree")<br /> tw.WriteStartElement("FOLDER")<br /> tw.WriteAttributeString("name", "Certification Material")

In the above code declared a object to a class xmltextwriter which accepts a xml file location as argument(constructor) .This object has properties like formatting ,indentation for generating valid xml of version-1 and encoding="utf-8" there by following method 'writestartdocument' which starts xml document,before we go further I will explain when to which method of xmltextwriter starting with WriteElementString it will output with text between the tags(<title>Enter status of bug for search</title>) it accepts arguments two arguments tag name and text to be displayed(tw.WriteElementString("title", "Enter status of bug for search")),of course we didn't use in code it will be helpful,coming to WriteStartElement using which we can starts new tag(<folder>) there must corresponding end element using writeendelement(</folder) this tag pretty trickery, if this tag don't have any child elements(another writestartelement) this will be self ending tag. If it has another writestartelement( before writeendelement) this will become parent tag.

Iam using recursive function for digging the directory.where below function is self explanatory which calls itself until filesysteminfo is not a directory(filesysteminfo.name<>directory)., otherwise(.doc,.txt ) it ends as leaf.




Function fileinfo(ByVal strfilepath As String) As Collection<br /> Dim colinner As New Collection<br />'declaring Directoryinfo object to get the file information stored 'in system<br /> Dim dfinner As DirectoryInfo<br />'passing the Parent file path(in which other files are stored), 'giving all access to parent directory in order to avoid security 'exception<br />dfinner = New DirectoryInfo(strfilepath)<br /> Dim fsiinner As FileSystemInfo<br /> For Each fsiinner In dfinner.GetFileSystemInfos<br />'collecting all directory information pres<br /> colinner.Add(fsiinner)<br /><br /> Next<br /> Dim countinner As Integer = colinner.Count()<br /> Dim tempdocinner As Integer = 0<br /> For tempdocinner = 1 To countinner<br /> Dim strtest1<br /> strtest1 = colinner.Item(tempdocinner)<br />'retrieving the type of elements stored in collection<br /> Dim strtype As Type = strtest1.GetType()<br /> If strtype.Name = "DirectoryInfo" Then<br /> Dim strfilename As DirectoryInfo = colinner.Item(tempdocinner)<br />'starting the xml with tag "folder".<br />'if change this tag name then change in xslt file also<br />tw.WriteStartElement("FOLDER")<br /> tw.WriteAttributeString("name", prodnode.Text)<br /><br />Dim strpathtemp = strfilepath & strtest1.name & "/"<br />'since it is directory calling the function fileinfo(with file 'path as argument)<br /> fileinfo(strpathtemp)<br /> tw.WriteEndElement()<br /> Else<br />'coming to else part when gettype of collection(colinner) is not a 'directory<br />'it means some .doc or .pdf or .ppt etc <br /> Dim files As FileInfo<br /> files = colinner.Item(tempdocinner)<br /> Dim strpath = files.FullName<br /> prodnode = New TreeNode<br /> prodnode.Text = files.Name<br /> Dim strdocname As String = prodnode.Text<br /> tw.WriteStartElement("KEY")<br /> tw.WriteAttributeString("name", prodnode.Text)<br /> tw.WriteAttributeString("path", strpath)<br /><br /> tw.WriteEndElement()<br /><br /> nodeSupp.ChildNodes.Add(prodnode)<br /> End If<br /> 'tw.WriteEndElement()<br /> Next<br /><br /> Return colinner<br /> End Function

Then coming to IO objects let me elucidate with respect to code,(Sorry for my impatience in following Coding Standards.)



Dim strfileinfopath As String = System.AppDomain.CurrentDomain.BaseDirectory & "docs/"<br /> Dim df As DirectoryInfo<br />'geting the directory information by passing directory path as 'argument<br /> df = New DirectoryInfo(strfileinfopath)<br /> Dim fsi As FileSystemInfo<br /> Dim col As New Collection<br /> Dim colfilepath As New Collection<br /> Dim colfilename As New Hashtable<br />'collecting all filesystem information present in parent folder<br /><br /> For Each fsi In df.GetFileSystemInfos<br /> Dim shi = fsi<br /> col.Add(fsi)<br /> Next<br /> Dim docfilescoun As Integer = col.Count()<br /> Dim tempdoc As Integer = 0<br /> Dim strfileinfo As DirectoryInfo<br /> If docfilescoun > 0 Then<br /> For tempdoc = 1 To docfilescoun<br /> strfileinfo = col.Item(tempdoc)<br /> Dim strtest<br /> strtest = col.Item(tempdoc)<br />'geting the type of the items of collection(col)
Dim strtype As Type = strtest.GetType<br />'if the type is directoryinfo continue(repeating the process of 'checking the subfolders) since it may contain subfolders by 'calling 'function fileinfo with path of folder to be checked<br /> If strtype.Name = "DirectoryInfo" Then<br /> Dim filecollection As New Collection<br />'using fullname property of fileinfo object to get the path of 'that file<br /> Dim strfullname As String = strfileinfo.FullName<br /> Dim strfilename1 As String = strfileinfo.Name<br /> Dim strfileinnerpath As String = System.AppDomain.CurrentDomain.BaseDirectory & "docs/" & strfilename1 & "/"<br />'starting the xml with tag name "folder" you can change it to other 'but change correspondingly in xslt file also<br /> tw.WriteStartElement("FOLDER")<br /> tw.WriteAttributeString("name", strfilename1)<br /><br />'testmaterial is a my local directory folder<br /><br /> If strfileinfo.Name <> "testmaterial " Then<br /> filecollection = fileinfo(strfileinnerpath)<br /> End If<br /> tw.WriteEndElement()<br /> Else<br />'coming to else part means not a item in collection(col) is not a 'directory it is of .doc or .pdf or .ppt etc.m<br /> Dim filename As FileInfo<br /> filename = col.Item(tempdoc)<br /> Dim strfull As String = filename.FullName<br /> tw.WriteStartElement("KEY")<br /> tw.WriteAttributeString("name", filename.Name)<br /> tw.WriteAttributeString("Path", strfull)<br /> tw.WriteEndElement()<br /> End If<br /> Next<br /> ' closing all the nodes correspondingly<br /> tw.WriteEndElement()<br /> tw.WriteEndElement()<br /> tw.WriteEndElement()<br /> tw.WriteEndDocument()<br />'diposing all the object of xml<br /> tw.Flush()<br /> tw.Close()<br /> End If

Starting with System.AppDomain.CurrentDomain.BaseDirectory which returns path of base directory of your application as it developed in vs.net in this case returns "C://inetpub/wwwroot/treeview".coming to DirectoryInfo class which returns all the directory information about the path passed as argument.

in this for loop "fsi" is object of filesysteminfo class ,where getfilesysteminfos is a method of derectoryinfo which returns files or directory information for each of type filesysteminfo




For Each fsi In df.GetFileSystemInfos<br /> Dim shi = fsi<br /> col.Add(fsi)<br /> Next
Here we are calling fileinfo function because it is directory(I mean it is file which may contain sub folders in which contain documents or sub folders)

filecollection = fileinfo(strfileinnerpath)

Coming to crux path applying xslt to xml

Dim doc As New XmlDocument()<br /><br /> doc.Load(Server.MapPath("test12345.xml"))<br /><br /> Dim t As New XslTransform()<br /> t.Load(Server.MapPath("images/XSLTFile1.xslt"))<br /> Dim sb As New StringBuilder()<br /> Dim writer As TextWriter<br /> writer = New StringWriter(sb)<br /><br />'vvvvvvimp<br />'if the framework is older add "nothing" as one more argument to 'below t.transform like t.Transform(doc, Nothing, writer, Nothing)<br />'vvvvimp

<br /> t.Transform(doc, Nothing, writer)<br /> Label1.Text = sb.ToString()<br />}


In the above block of code loading the xml document using server.mappath and applying xslt to xml using XslTransform class.



I am ending this article with giving code(this code is need more parsed to xml ) how to read ,you can skip this if know how to read xml document or having knowledge about xmltextreader class.



Dim oRead As XmlTextReader<br />Dim cou As Integer = 1<br /><br /> Try<br /> oRead = New XmlTextReader("C:\inetpub\wwwroot\test\test12345.xml")<br /> Do While oRead.Read<br /> oRead.MoveToContent()<br /> If oRead.Name.Equals("KEY") Then<br /><br /> If oRead.GetAttribute("name").ToString = lsStatus Then<br /> Dim strpath As String = oRead.GetAttribute("path")<br /> Dim stractpath = Split(strpath, "test\")<br /> Dim stractpath1 = stractpath(1)<br />'redirecting to viewfile.aspx for viewing the file selected with 'path as querystring<br /> Response.Redirect("viewfile.aspx?filename=" + stractpath1)<br /> End If<br /> End If<br /><br /> Loop

I here conclude this article with the whole code contains just three objects

1.directoryinfo
2.xmltextwriter
3.xsltransform
4.xmltextreader

I mean to say nothing to daunt just playing around those four objects and calling a function recursively.

ABOUT DOWNLOAD.

application presented in zip file is compatible to v1.1 and visual studio 2003.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
Working for SATYAM since july 03,2006 as a dotnet developer. Gained expertise in dotnet and moderated skills in Flex,Ajax,javascript.

Comments and Discussions

 
SuggestionFormatting Pin
Max Weller29-Jan-12 0:56
Max Weller29-Jan-12 0:56 
QuestionThis looks like a really good article but I ran into a snag. Pin
tzeis20-Feb-10 4:14
tzeis20-Feb-10 4:14 
GeneralMy vote of 1 Pin
ScottM115-Jul-09 2:33
ScottM115-Jul-09 2:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.